<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>智能调色板系统</title>
    <style>
      :root {
        --card-padding: 1.5rem;
        --color-block-size: 110px;
      }

      .palette-container {
        max-width: 1200px;
        margin: 2rem auto;
        padding: 0 20px;
      }

      .color-family {
        margin-bottom: 3rem;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        overflow: hidden;
      }

      .family-title {
        padding: 1rem var(--card-padding);
        background: #f8f9fa;
        border-bottom: 1px solid #eee;
        font-weight: 600;
      }

      .color-grid {
        display: grid;
        grid-template-columns: repeat(
          auto-fill,
          minmax(var(--color-block-size), 1fr)
        );
        padding: var(--card-padding);
        gap: 1rem;
      }

      .color-card {
        position: relative;
        height: var(--color-block-size);
        border-radius: 8px;
        cursor: pointer;
        transition: transform 0.2s;
        overflow: hidden;
        border: 1px solid rgba(0, 0, 0, 0.1);
      }

      .color-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
      }

      .color-info {
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 8px;
        background: rgba(255, 255, 255, 0.9);
        font-family: monospace;
      }

      .color-name {
        font-size: 0.9em;
        color: #333;
      }

      .color-value {
        font-size: 0.85em;
        color: #666;
      }

      .copy-alert {
        position: fixed;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        background: #333;
        color: white;
        padding: 8px 16px;
        border-radius: 4px;
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="palette-container" id="paletteContainer"></div>
    <div class="copy-alert" id="copyAlert">已复制!</div>

    <script>
      // 配置中心 - 在此处添加/修改色系
      const colorConfig = [
        {
          name: "主品牌色系",
          colors: [
            { name: "主色调", value: "#ff971c" },
            { name: "color-1", value: "#fff8e8" },
            { name: "color-2", value: "#ffebbf" },
            { name: "color-3", value: "#ffda96" },
            { name: "color-4", value: "#ffc76e" },
            { name: "color-5", value: "#ffb145" },
            { name: "color-6", value: "#ff971c" },
            { name: "color-7", value: "#d9760d" },
            { name: "color-8", value: "#b35702" },
            { name: "color-9", value: "#8c3f00" },
            { name: "color-10", value: "#662b00" },
          ],
        },
        {
          name: "主品牌色系-算法2",
          colors: [
            { name: "color-primary-100", value: "#FFF2D1" },
            { name: "color-primary-200", value: "#FFE1A4" },
            { name: "color-primary-300", value: "#FFCD76" },
            { name: "color-primary-400", value: "#FFB854" },
            { name: "color-primary-500", value: "#FF971C" },
            { name: "color-primary-600", value: "#DB7714" },
            { name: "color-primary-700", value: "#B75A0E" },
            { name: "color-primary-800", value: "#934008" },
            { name: "color-primary-900", value: "#7A2F05" },
          ],
        },
        {
          name: "成功",
          colors: [
            { name: "color-success-100", value: "#F6FDDC" },
            { name: "color-success-200", value: "#EAFCB9" },
            { name: "color-success-300", value: "#D9F895" },
            { name: "color-success-400", value: "#C7F179" },
            { name: "color-success-500", value: "#ADE84E" },
            { name: "color-success-600", value: "#8BC739" },
            { name: "color-success-700", value: "#6CA727" },
            { name: "color-success-800", value: "#4F8618" },
            { name: "color-success-900", value: "#3B6F0E" },
          ],
        },
        {
          name: "危险",
          colors: [
            { name: "color-danger-100", value: "#FFE9E0" },
            { name: "color-danger-200", value: "#FFCEC1" },
            { name: "color-danger-300", value: "#FFADA3" },
            { name: "color-danger-400", value: "#FF8F8C" },
            { name: "color-danger-500", value: "#FF6670" },
            { name: "color-danger-600", value: "#DB4A61" },
            { name: "color-danger-700", value: "#B73353" },
            { name: "color-danger-800", value: "#932047" },
            { name: "color-danger-900", value: "#7A133F" },
          ],
        },
        {
          name: "信息",
          colors: [
            { name: "color-info-100", value: "#D4F2FE" },
            { name: "color-info-200", value: "#A9E0FE" },
            { name: "color-info-300", value: "#7FCBFE" },
            { name: "color-info-400", value: "#5EB5FD" },
            { name: "color-info-500", value: "#2A93FC" },
            { name: "color-info-600", value: "#1E72D8" },
            { name: "color-info-700", value: "#1555B5" },
            { name: "color-info-800", value: "#0D3B92" },
            { name: "color-info-900", value: "#082978" },
          ],
        },
        {
          name: "警告",
          colors: [
            { name: "color-warning-100", value: "#FFF9CC" },
            { name: "color-warning-200", value: "#FFF299" },
            { name: "color-warning-300", value: "#FFE866" },
            { name: "color-warning-400", value: "#FFDF3F" },
            { name: "color-warning-500", value: "#FFD000" },
            { name: "color-warning-600", value: "#DBAE00" },
            { name: "color-warning-700", value: "#B78E00" },
            { name: "color-warning-800", value: "#937000" },
            { name: "color-warning-900", value: "#7A5A00" },
          ],
        },
      ];

      // 动态生成色板
      function renderPalettes() {
        const container = document.getElementById("paletteContainer");

        colorConfig.forEach((family) => {
          const familyEl = document.createElement("div");
          familyEl.className = "color-family";

          familyEl.innerHTML = `
                    <div class="family-title">${family.name}</div>
                    <div class="color-grid">
                        ${family.colors
                          .map(
                            (color) => `
                            <div class="color-card" 
                                 style="background: ${color.value}" 
                                 data-value="${color.value}"
                                 data-name="${color.name}">
                                <div class="color-info">
                                    <div class="color-name">${color.name}</div>
                                    <div class="color-value">${color.value}</div>
                                </div>
                            </div>
                        `
                          )
                          .join("")}
                    </div>
                `;

          container.appendChild(familyEl);
        });
      }

      // 智能文字颜色适配
      function getContrastColor(hex) {
        const r = parseInt(hex.slice(1, 3), 16);
        const g = parseInt(hex.slice(3, 5), 16);
        const b = parseInt(hex.slice(5, 7), 16);
        const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
        return luminance > 0.6 ? "#333" : "#fff";
      }

      // 点击复制功能
      document.addEventListener("click", async (e) => {
        const colorCard = e.target.closest(".color-card");
        if (!colorCard) return;

        try {
          await navigator.clipboard.writeText(colorCard.dataset.value);
          const alert = document.getElementById("copyAlert");
          alert.style.display = "block";
          setTimeout(() => (alert.style.display = "none"), 1500);
        } catch (err) {
          console.error("复制失败:", err);
        }
      });

      // 初始化
      document.addEventListener("DOMContentLoaded", () => {
        renderPalettes();
        // 自动调整文字颜色
        document.querySelectorAll(".color-info").forEach((info) => {
          const bgColor = info.parentElement.style.backgroundColor;
          const textColor = getContrastColor(bgColor);
          info.style.color = textColor;
        });
      });
    </script>
  </body>
</html>
